<template>
	<view :style="mainStore.themeColor">
		<status-bar title="编辑" />
		<view class="padding20">
			<view class="d-flex j-sb a-center m-bot26">
				<view class="size30 color-222 bold">首页应用</view>
				<view class="save flexac themeBg size24 white" @click="handleSave">保存</view>
			</view>
			<view class="row">
				<view class="tool p-re" v-for="(item,index) in homeList" :key="index">
					<image class="icon m-right12" :src="imgUrls(item.icon)"></image>
					<text class="size24 color-222">{{ item.name }}</text>
					<image class="btn p-ab" :src="staticImg + 'jianshao.png'" @click="handleDel(index, item.option_id)"></image>
				</view>
			</view>
		</view>
		<view class="divider"></view>
		<view class="padding20" v-for="(item,index) in allList" :key="index">
			<view class="size30 color-222 bold m-bot26">{{ item.cate_name }}</view>
			<view class="row">
				<block v-for="(subItem,subIndex) in item.list" :key="subIndex">
					<view class="tool p-re" v-if="subItem.is_open == 0">
						<image class="icon m-right12" :src="imgUrls(subItem.icon)"></image>
						<text class="size24 color-222">{{ subItem.name }}</text>
						<image class="btn p-ab" :src="staticImg + 'tianjia.png'" @click="handleAdd(subItem)"></image>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { staticImg } from '@/utils/config.js'
	import { Toast, imgUrls } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	import { useMainStore } from '@/stores/index'
	const mainStore = useMainStore()
	
	const allList = ref([])
	const homeList = ref([])
	
	onLoad(() => {
		getTools()
	})
	
	const getTools = () => {
		Http.get({
			url: '/api/getAllOptions'
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			allList.value = res.notInArray || []
			if(res.inArray.length) homeList.value = res.inArray[0].list
		})
	}
	
	const handleAdd = (item) => {
		homeList.value.push(item)
		item.is_open = 1
	}
	
	const handleDel = (index, id) => {
		homeList.value.splice(index, 1)
		allList.value.forEach(item => {
			item.list.forEach(subItem => {
				if(subItem.option_id == id) subItem.is_open = 0
			})
		})
	}
	
	const handleSave = () => {
		Http.post({
			url: '/api/saveAllOptions',
			data: {
				notInArray: JSON.stringify(allList.value)
			}
		}).then(res => {
			Toast(res.msg)
		})
	}
</script>

<style lang="scss" scoped>
	.save {
		width: 100rpx;
		height: 48rpx;
		border-radius: 24rpx;
	}
	.tool {
		width: 224rpx;
		height: 88rpx;
		background: #F6F7FC;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin: 0 19rpx 26rpx 0;
		&:nth-child(3n) {
			margin-right: 0;
		}
		.icon {
			width: 50rpx;
			height: 50rpx;
			flex-shrink: 0;
		}
		.btn {
			width: 40rpx;
			height: 40rpx;
			right: -10rpx;
			top: -10rpx;
		}
	}
	.divider {
		height: 20rpx;
		background: #F2F2F2;
	}
</style>
